import {useState,useEffect} from 'react'
// 导入接口
import {GetProductList} from '@/api/yp'
// 连接
import {NavLink,} from 'react-router-dom'
function ProduceList() {
  // 商品列表
  const [produceList,setProduceList] = useState([])
  // 组件挂载完毕获取商品类别
  useEffect(()=>{
    getProduceList()
  },[])
  // 获取商品列表的方法
  function getProduceList(){
    GetProductList()
    .then(res=>{
      // 更新商品列表
      setProduceList(res.data.data)
    })
  }
  return ( <div>
    商品列表 <br />
    {/* <a href="#/admin/produce/editProduce/1">商品1</a> <br />
    <a href="#/admin/produce/editProduce/2">商品2</a> */}
    {/* 遍历商品列表 */}
    {
      produceList.map(item=><div key={item.id}>
        <span>{item.productName}</span>
        {/* query，search查询方式传参 参数不影响页面内容 */}
        <NavLink to={'/admin/produce/editp?id='+item.id}>修改商品</NavLink>,
        <NavLink to={'/admin/produce/editProduce/'+item.id}>详情</NavLink>
      </div>)
    }
  </div> );
}

export default ProduceList;